<template>
  <ul class='tabbar'>
    <li
    class="tabbar-item"
    is="router-link"
    tag="li"
    replace
    v-for="tab in tabs"
    :key="tab.path"
    :to="tab.path"
    >
    <i class="iconfont" v-html="tab.meta.icon"></i>
    <span>{{tab.meta.title}}</span>
    </li>
  </ul>
</template>

<script>
import routers from '@/router/routes'

export default {
  name: 'Tabbar',
  data() {
    return {}
  },
  computed: {
    tabs() {
      return routers.filter(route => route.meta?.inTabbar)
    },
  },
}
</script>

<style lang='less' scoped>
@font-face {
  font-family: 'iconfont';  /* Project id 2965250 */
  src: url('http://at.alicdn.com/t/font_2965250_y8kgy514omg.woff2?t=1637824548031') format('woff2'),
       url('http://at.alicdn.com/t/font_2965250_y8kgy514omg.woff?t=1637824548031') format('woff'),
       url('http://at.alicdn.com/t/font_2965250_y8kgy514omg.ttf?t=1637824548031') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.tabbar{
  width: 100%;
  height: 100px;
  border-top: 1px solid rgb(212, 210, 210);
  display: flex;
  justify-content: space-around;
  text-align: center;
  .tabbar-item{
    display: flex;
    flex-flow: column;
    margin-top: 15px;
    font-size: 18px;
    i{
     font-size: 18px;
    }
    span{
      font-weight: 700;
      font-size: 12px;
    }
  }
  .router-link-exact-active, .router-link-active{
    color:#00B75D;
  }
}
.tabbar{
  background-color: white;
}
</style>
